<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('Dimple的个人博客首页')"/>
    <th:block th:include="include :: min862f-css"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>博文概览</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link" title="折叠">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link" title="关闭">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="widget lazur-bg p-lg text-center">
                                    <div class="m-b-md">
                                        <i class="fa  fa-list-ul  fa-4x"></i>
                                        <h1 class="m-xs" th:text="${total}">47</h1>
                                        <h3 class="font-bold no-margins">
                                            博文总数
                                        </h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="widget navy-bg p-lg text-center">
                                    <div class="m-b-md">
                                        <i class="fa  fa-check  fa-4x"></i>
                                        <h1 class="m-xs" th:text="${published}">47</h1>
                                        <h3 class="font-bold no-margins">
                                            已发布
                                        </h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="widget yellow-bg p-lg text-center">
                                    <div class="m-b-md">
                                        <i class="fa fa-chain-broken fa-4x"></i>
                                        <h1 class="m-xs" th:text="${draft}">47</h1>
                                        <h3 class="font-bold no-margins">
                                            草稿箱
                                        </h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="widget red-bg p-lg text-center">
                                    <div class="m-b-md">
                                        <i class="fa fa-trash fa-4x"></i>
                                        <h1 class="m-xs" th:text="${garbage}">47</h1>
                                        <h3 class="font-bold no-margins">
                                            垃圾箱
                                        </h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4">
                <div class="ibox-title">
                    <h5>最新动态</h5>
                    <div class="ibox-tools">
                        <a onclick="localRefresh()" title="刷新">
                            <i class="fa fa-refresh"></i>
                        </a>
                        <a class="collapse-link" title="折叠">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link" title="关闭">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id="logMessagesRefresh" style="height:300px;overflow-x:auto;overflow-y:auto"
                         th:fragment="logMessagesRefresh">
                        <ul>
                            <li th:each="item:${logMessages}" style="margin-bottom:10px ;list-style-type: none">
                            <span style="" class="badge badge-info" th:class="${'badge '+item.style}"
                                  th:text="${item.dateStr}"></span>
                                <span class="logTitle" th:utext="${item.message}"></span>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
            <div class="col-lg-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>系统状态仪表盘</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link" title="折叠">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link" title="关闭">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div id="systemInfoEchart" style="width: 100%;height: 300px"></div>
                    </div>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>访客统计</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link" title="折叠">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link" title="关闭">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-lg-9">
                                <div class="">
                                    <div id="echarts_line_visitor" style="width: 100%;height: 350px"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <ul class="stat-list">
                                    <li>
                                        <div class="widget style1 lazur-bg">
                                            <div class="row">
                                                <div class="col-xs-4">
                                                    <i class="fa fa-user   fa-5x"></i>
                                                </div>
                                                <div class="col-xs-8 text-right">
                                                    <span> 在线人数 </span>
                                                    <h2 class="font-bold" th:text="${onlineCount}">260</h2>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="widget style1 yellow-bg">
                                            <div class="row">
                                                <div class="col-xs-4">
                                                    <i class="fa  fa-plug fa-5x"></i>
                                                </div>
                                                <div class="col-xs-8 text-right">
                                                    <span> 今日访客 </span>
                                                    <h2 class="font-bold" th:text="${todayCount}">12</h2>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="widget style1 navy-bg">
                                            <div class="row">
                                                <div class="col-xs-4">
                                                    <i class="fa  fa-arrow-circle-up fa-5x"></i>
                                                </div>
                                                <div class="col-xs-8 text-right">
                                                    <span> 历史总数 </span>
                                                    <h2 class="font-bold" th:text="${totalCount}">26'C</h2>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: footer"/>
<script>
    $(function () {
        $(".logUrl").click(function () {
            var option = {
                url: $(this).attr("href"),
                title: "预览",
                width: $(window).width() / 1.5,
                btn: ['关闭'],
                yes: function (index, layero) {
                    layer.close(index);
                }
            };
            $.modal.openOptions(option);
            return false;
        });
    })
</script>
<script>
    function localRefresh() {
        $('#logMessagesRefresh').block({
                message: '<div class="loaderbox"><div class="loading-activity"></div> ' + '正在加载中，请稍后' + '</div>'
            }
        );
        // 装载局部刷新返回的页面
        $('#logMessagesRefresh').load("/dashboard/main/logMessages");
    }

    $(function () {
        //初始化系统信息仪表
        initSystemInfoEchart();
        setSystemDataToEchart();

        //初始化访客统计
        initVisitorCountInfoEchart();
        setVisitorCountInfoDataToEchart();

    });
    var systemInfoEchart;
    var visitorCountInfoEchart;

    function initVisitorCountInfoEchart() {
        visitorCountInfoEchart = echarts.init(document.getElementById('echarts_line_visitor'));
        option = {
            grid: {
                x: 45,
                y: 45,
                x2: 45,
                y2: 45,
            },
            title: {
                text: '近七日访问量',
                left: 'center',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['近七日访问量']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {
                        readOnly: false
                    },
                    magicType: {
                        type: ['line', 'bar']
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
            },
            series: [{
                name: '当日访问量',
                type: 'line',
                data: [],
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            }]
        };
        visitorCountInfoEchart.showLoading();
        visitorCountInfoEchart.setOption(option);
    }

    function setVisitorCountInfoDataToEchart() {
        $.ajax({
            url: "/dashboard/visitCount/list",
            type: "get",
            success: function (result) {
                visitorCountInfoEchart.hideLoading();
                if (result.code == 200) {
                    console.log(result.data);
                    var xAxiss = new Array();
                    $.each(result.data, function (index, obj) {
                        xAxiss[index] = obj.date;
                    });
                    visitorCountInfoEchart.setOption({
                        xAxis: {
                            data: xAxiss
                        },
                        series: [
                            {
                                data: result.data
                            }
                        ]
                    });
                }
            }
        });
    }

    function initSystemInfoEchart() {
        systemInfoEchart = echarts.init(document.getElementById('systemInfoEchart'));
        //设置参数
        var option = {
            backgroundColor: 'rgba(255,255,255,0)',
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            grid: {
                top: "1px",
                left: "1px",
                right: "1px",
                bottom: "1px",
                backgroundColor: '#fff',
                width: "auto", //图例宽度
                height: "100%", //图例高度
            },
            series: [
                {
                    name: '内存使用率',
                    type: 'gauge',
                    z: 3,
                    min: 0,
                    max: 100,
                    splitNumber: 10,
                    radius: '100%',
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 15,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    title: {
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 20,
                            fontStyle: 'italic'
                        }
                    },
                    detail: {
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder'
                        }
                    },
                    data: [{value: 40, name: '内存使用率（%）'}]
                },
                {
                    name: 'CPU使用率',
                    type: 'gauge',
                    center: ['22%', '55%'],    // 默认全局居中
                    radius: '85%',
                    min: 0,
                    max: 100,
                    endAngle: 45,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width: 5
                    },
                    title: {
                        offsetCenter: [0, '-30%'],       // x, y，单位px
                    },
                    detail: {
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder'
                        }
                    },
                    data: [{value: 50, name: 'CPU使用率（%）'}]
                },
                {
                    name: 'JVM使用率',
                    type: 'gauge',
                    center: ['79%', '55%'],    // 默认全局居中
                    radius: '85%',
                    min: 0,
                    max: 100,
                    startAngle: 140,
                    endAngle: -45,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width: 5
                    },
                    title: {
                        offsetCenter: [0, '-30%'],       // x, y，单位px
                    },
                    detail: {
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder'
                        }
                    },
                    data: [{value: 50, name: 'JVM使用率（%）'}]
                }
            ]
        };
        systemInfoEchart.showLoading();
        systemInfoEchart.setOption(option);
    }

    /**
     * 设置系统状态仪表盘的数据
     */
    function setSystemDataToEchart() {
        $.ajax({
            url: "/dashboard/memJvmCpuData/list",
            type: "get",
            success: function (result) {
                console.log(result)
                if (result.code === 200) {
                    console.log(11);
                    systemInfoEchart.hideLoading();
                    var option = systemInfoEchart.getOption();
                    //mem
                    option.series[0].data[0].value = result.data[0];
                    //cpu
                    option.series[1].data[0].value = result.data[1];
                    //jvm
                    option.series[2].data[0].value = result.data[2];
                    systemInfoEchart.setOption(option, true);
                }
            }
        })
    }
</script>
</body>
</html>
